/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* vue */
import { defineComponent, PropType } from 'vue'
/* types */
import { SettingGPTRobotModuleType } from "@src/modules/setting/gpt/types";

enum SettingGPTEditViewModuleAddEventEnum {
  Input = 'input'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTEditViewModuleAdd,
  props: {
    title: {
      type: String,
      default: ''
    },
    modules: {
      type: Array as PropType<SettingGPTRobotModuleType[]>,
      default: () => []
    },
    onInput: {
      type: Function
    }
  },
  data() {
    return {
      value: [] as string[]
    }
  },
  computed: {
    placeholder(): string {
      return '请选择'
    }
  },
  methods: {
    clear() {
      const emptyValue = [] as string[]
      this.onChangeHandler(emptyValue)
    },
    emitInput(value: string[]) {
      this.$emit(SettingGPTEditViewModuleAddEventEnum.Input, value)
    },
    onChangeHandler(value: string[]) {
      this.value = value
      this.emitInput(value)
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTEditViewModuleAdd}>
        
        <el-form label-position="top">
          <el-form-item
            label={this.title}
          >
            <el-select 
              clearable
              value={this.value} 
              placeholder={this.placeholder}
              multiple
              onInput={this.onChangeHandler}
            >
              {this.modules.map(module => {
                return (
                  <el-option
                    key={module.value}
                    label={module.name}
                    value={module.value}
                  >
                  </el-option>
                )
              })}
            </el-select>
          </el-form-item>
        </el-form>
        
      </div>
    )
  }
})